<template>
  <view class="login-container">
    <!-- 页面头部 -->
    <view class="header">
      <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
      <text class="title">图书推荐系统</text>
    </view>
    
    <!-- 切换登录/注册选项卡 -->
    <view class="tab-container">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'login' }"
        @tap="switchTab('login')"
      >
        <text>登录</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'register' }"
        @tap="switchTab('register')"
      >
        <text>注册</text>
      </view>
    </view>
    
    <!-- 登录表单 -->
    <view v-if="activeTab === 'login'" class="form-container">
      <view class="input-group">
        <text class="input-label">用户名</text>
        <input 
          class="input-field"
          type="text"
          v-model="loginForm.username"
          placeholder="请输入用户名/邮箱/手机号"
        />
      </view>
      <view class="input-group">
        <text class="input-label">密码</text>
        <input 
          class="input-field"
          type="password"
          v-model="loginForm.password"
          placeholder="请输入密码"
        />
      </view>
      
      <view class="forget-pwd">
        <text @tap.stop="goToResetPassword">忘记密码?</text>
      </view>
      
      <!-- 使用官方button组件，添加防多击处理 -->
      <button 
        class="submit-btn" 
        :class="{disabled: isLoginSubmitting}" 
        type="primary" 
        :loading="isLoginSubmitting" 
        :disabled="isLoginSubmitting"
        @tap.stop.prevent="doLoginAction">
        {{ isLoginSubmitting ? '登录中...' : '登录' }}
      </button>
      
      <!-- 第三方登录选项 -->
      <view class="third-party-login">
        <view class="divider">
          <text>其他登录方式</text>
        </view>
        <view class="third-party-icons">
          <view class="icon-item" @click="thirdPartyLogin('wechat')">
            <text class="iconfont icon-wechat"></text>
          </view>
          <view class="icon-item" @click="thirdPartyLogin('qq')">
            <text class="iconfont icon-QQ"></text>
          </view>
          <view class="icon-item" @click="thirdPartyLogin('weibo')">
            <text class="iconfont icon-weibo"></text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 注册表单 -->
    <view v-else class="form-container">
      <view class="input-group">
        <text class="input-label">用户名</text>
        <input 
          class="input-field"
          type="text"
          v-model="registerForm.username"
          placeholder="请输入用户名(4-16位字母数字)"
        />
        <text v-if="formErrors.username" class="error-message">{{formErrors.username}}</text>
      </view>
      
      <view class="input-group">
        <text class="input-label">密码</text>
        <input 
          class="input-field"
          type="password"
          v-model="registerForm.password"
          placeholder="请输入密码(6-20位)"
        />
        <text v-if="formErrors.password" class="error-message">{{formErrors.password}}</text>
      </view>
      
      <view class="input-group">
        <text class="input-label">确认密码</text>
        <input 
          class="input-field"
          type="password"
          v-model="registerForm.confirmPassword"
          placeholder="请再次输入密码"
        />
        <text v-if="formErrors.confirmPassword" class="error-message">{{formErrors.confirmPassword}}</text>
      </view>
      
      <view class="input-group">
        <text class="input-label">电子邮箱</text>
        <input 
          class="input-field"
          type="text"
          v-model="registerForm.email"
          placeholder="请输入电子邮箱"
        />
        <text v-if="formErrors.email" class="error-message">{{formErrors.email}}</text>
      </view>
      
      <view class="agreement">
        <checkbox :checked="registerForm.agreement" @click="registerForm.agreement = !registerForm.agreement"></checkbox>
        <text>我已阅读并同意</text>
        <text class="link" @click="showAgreement">《用户协议》</text>
      </view>
      
      <button 
        class="submit-btn" 
        :disabled="isRegisterSubmitting || !registerForm.agreement" 
        @click="handleRegister"
      >
        {{ isRegisterSubmitting ? '注册中...' : '注册' }}
      </button>
    </view>
    
    <!-- 提示信息弹窗 -->
    <uni-popup ref="messagePopup" type="message">
      <uni-popup-message 
        :type="popupConfig.type" 
        :message="popupConfig.message" 
        :duration="2000"
      ></uni-popup-message>
    </uni-popup>
    
    <!-- 协议弹窗 -->
    <uni-popup ref="agreementPopup" type="center">
      <view class="agreement-popup">
        <view class="agreement-title">用户协议</view>
        <scroll-view scroll-y="true" class="agreement-content">
          <text>本服务协议是用户与图书推荐系统之间的协议，详细描述了用户在使用本系统过程中的权利义务关系...</text>
        </scroll-view>
        <view class="agreement-footer">
          <button @click="closeAgreement" class="agreement-btn">关闭</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { useUserStore } from '@/store/user.js';

// 新版登录页面
// 添加防拦截访问和多重跳转保护
export default {
  // 页面加载时执行
  onLoad() {
    console.log('登录页面加载 - V2');
    
    // 记录页面已打开标记
    try {
      uni.setStorageSync('loginPageOpened', 'true');
      uni.setStorageSync('loginPageOpenTime', Date.now().toString());
      console.log('已标记登录页面打开状态');
    } catch (err) {
      console.error('记录页面状态失败:', err);
    }
    
    try {
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1296db'
      });
    } catch (err) {
      console.error('设置导航栏颜色失败:', err);
    }
  },
  
  // 页面显示时执行
  onShow() {
    console.log('登录页面显示 - 已禁用自动跳转');
    
    // 完全禁用自动跳转逻辑
    this.forceStayOnLoginPage = true;
    
    // 设置状态标记防止其他页面干扰
    uni.setStorageSync('loginPageActive', 'true');
    uni.setStorageSync('loginPageVisited', 'true');
  },
  
  // 页面隐藏时执行
  onHide() {
    console.log('登录页面隐藏');
    uni.removeStorageSync('loginPageActive');
  },
    // 页面卸载时执行
  onUnload() {
    console.log('登录页面卸载');
    uni.removeStorageSync('loginPageActive');
    uni.removeStorageSync('loginPageVisited');
  },
  setup() {
    console.log('登录页面setup函数执行');
    // 获取用户状态管理实例
    const userStore = useUserStore();
    
    // 当前激活的选项卡（登录/注册）
    const activeTab = ref('login');
    
    // 登录表单数据 - 确保正确初始化
    const loginForm = reactive({
      username: '',
      password: ''
    });
    
    // 注册表单数据 - 确保所有字段正确初始化
    const registerForm = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      email: '',
      agreement: false // 用户协议勾选状态
    });
    
    // 表单错误信息
    const formErrors = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      email: ''
    });
    
    // 提交状态
    const isLoginSubmitting = ref(false);
    const isRegisterSubmitting = ref(false);
    
    // 弹窗引用
    const messagePopup = ref(null);
    const agreementPopup = ref(null);
    
    // 弹窗配置
    const popupConfig = reactive({
      type: 'success',
      message: ''
    });
    
    /**
     * 切换登录/注册选项卡
     * @param {String} tab 目标选项卡：'login'或'register'
     */
    function switchTab(tab) {
      activeTab.value = tab;
      // 切换选项卡时重置表单错误
      Object.keys(formErrors).forEach(key => {
        formErrors[key] = '';
      });
    }
    
    /**
     * 显示消息提示
     * @param {String} message 消息内容
     * @param {String} type 提示类型: success, warning, error
     */
    function showMessage(message, type = 'success') {
      popupConfig.type = type;
      popupConfig.message = message;
      messagePopup.value.open();
    }
    
    /**
     * 完全重写的登录处理函数 - 解决所有登录问题
     */
    async function doLoginAction(event) {
      // 阻止事件流和默认行为传播
      if (event) {
        event.stopPropagation();
        event.preventDefault && event.preventDefault();
      }
      
      console.log('登录按钮被点击 - 修复版');
      
      // 防止重复提交
      if (isLoginSubmitting.value) {
        console.log('登录请求正在处理中');
        return;
      }
      
      // 表单字段验证
      if (!loginForm.username || !loginForm.password) {
        showMessage('请填写用户名和密码', 'error');
        return;
      }
      
      // 设置登录中状态
      isLoginSubmitting.value = true;
      
      try {
        // 标记正在处理登录操作，防止其他页面干扰
        uni.setStorageSync('loginProcessing', 'true');
        
        // 复制登录表单数据，避免被修改
        const loginData = {
          username: loginForm.username.trim(),
          password: loginForm.password
        };
        
        console.log('开始处理登录:', loginData.username);
        
        // 调用用户存储登录方法
        const result = await userStore.login(loginData);
        
        console.log('登录API响应:', result);
        
        // 添加延迟确保状态更新完成
        await new Promise(resolve => setTimeout(resolve, 800));
        
        // 再次确认登录状态
        const loginStatus = userStore.isLoggedIn;
        console.log('登录后状态检查:', loginStatus);
        
        // 登录成功处理
        if (loginStatus) {
          // 用简单的语言提示登录成功
          showMessage('登录成功！正在跳转...', 'success');
          
          // 等待消息提示显示完毕
          await new Promise(resolve => setTimeout(resolve, 1500));
          
          // 手动刷新页面数据
          uni.$emit('refreshPageData');
          
          // 登录成功后手动跳转到首页
          setTimeout(() => {
            try {
              uni.switchTab({
                url: '/pages/index/index',
                success: function() {
                  console.log('已成功跳转回首页');
                  // 清除登录处理标记
                  uni.removeStorageSync('loginProcessing');
                }
              });
            } catch (e) {
              console.error('跳转页面失败:', e);
            }
          }, 200);
        } else {
          // 异常情况：登录请求成功但状态未更新
          showMessage('登录成功，但状态更新失败', 'error');
          uni.removeStorageSync('loginProcessing');
        }
      } catch (error) {
        console.error('登录错误:', error);
        
        // 默认错误提示
        let errorMsg = '登录失败，请检查用户名和密码';
        
        // 根据错误信息判断问题类型
        if (error.code) {
          // 有错误代码的情况
          switch (error.code) {
            case 1001:
              errorMsg = '用户名或密码错误';
              break;
            case 1002:
              errorMsg = '账号已被锁定，请联系客服';
              break;
            case 1003:
              errorMsg = '账号不存在，请先注册';
              break;
            case 1004:
              errorMsg = '服务器繁忙，请稍后再试';
              break;
            default:
              errorMsg = `登录失败 (错误代码: ${error.code})`;
              break;
          }
        } else if (error.message) {
          // 有错误消息的情况
          errorMsg = error.message;
        } else if (error.response && error.response.data && error.response.data.message) {
          // 服务器返回的错误消息
          errorMsg = error.response.data.message;
        }
        
        // 显示错误信息
        showMessage(errorMsg, 'error');
        
        // 清空密码，保留用户名便于重试
        loginForm.password = '';
        
      } finally {
        // 无论成功失败，都重置登录中状态
        isLoginSubmitting.value = false;
      }
    }
    
    /**
     * 验证注册表单
     * @returns {Boolean} 验证结果
     */
    function validateRegisterForm() {
      let isValid = true;
      
      // 重置错误信息
      Object.keys(formErrors).forEach(key => {
        formErrors[key] = '';
      });
      
      // 验证用户名
      if (!registerForm.username) {
        formErrors.username = '请输入用户名';
        isValid = false;
      } else if (registerForm.username.length < 4 || registerForm.username.length > 16) {
        formErrors.username = '用户名长度应为4-16位';
        isValid = false;
      } else if (!/^[a-zA-Z0-9_]+$/.test(registerForm.username)) {
        formErrors.username = '用户名只能包含字母、数字和下划线';
        isValid = false;
      }
      
      // 验证密码
      if (!registerForm.password) {
        formErrors.password = '请输入密码';
        isValid = false;
      } else if (registerForm.password.length < 8 || registerForm.password.length > 20) {
        formErrors.password = '密码长度应为8-20位';
        isValid = false;
      } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>]).{8,}$/.test(registerForm.password)) {
        formErrors.password = '密码必须包含大小写字母、数字和特殊字符';
        isValid = false;
      }
      
      // 验证确认密码
      if (!registerForm.confirmPassword) {
        formErrors.confirmPassword = '请再次输入密码';
        isValid = false;
      } else if (registerForm.confirmPassword !== registerForm.password) {
        formErrors.confirmPassword = '两次密码输入不一致';
        isValid = false;
      }
      
      // 验证邮箱
      if (!registerForm.email) {
        formErrors.email = '请输入邮箱';
        isValid = false;
      } else if (!/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(registerForm.email)) {
        formErrors.email = '邮箱格式不正确';
        isValid = false;
      }
      
      // 验证协议
      if (!registerForm.agreement) {
        showMessage('请阅读并同意用户协议', 'warning');
        isValid = false;
      }
      
      return isValid;
    }
    
    /**
     * 处理注册提交
     */
    async function handleRegister() {
      // 验证表单
      if (!validateRegisterForm()) {
        return;
      }
      
      // 防止重复提交
      if (isRegisterSubmitting.value) {
        console.log('注册请求正在处理中');
        return;
      }
      
      // 检查用户名是否已存在
      if (!await validateUsername(registerForm.username)) return;
      
      // 检查邮箱是否已存在
      if (!await validateEmail(registerForm.email)) return;
      
      // 设置注册中状态
      isRegisterSubmitting.value = true;
      
      try {
        // 提交注册请求
        console.log('发送注册请求数据:', { 
          username: registerForm.username,
          email: registerForm.email,
          password: '∗∗∗∗∗∗' // 密码隐藏显示
        });
        
        const result = await userStore.register({
          username: registerForm.username,
          password: registerForm.password,
          confirmPassword: registerForm.confirmPassword,
          email: registerForm.email
        });
        
        console.log('注册响应数据:', result);
        
        // 检查响应中是否包含token
        let token = null;
        let userInfo = null;
        
        // 兼容不同的响应格式
        if (result && result.data) {
          // 格式1: { data: { token, user } }
          if (result.data.token) {
            token = result.data.token;
            userInfo = result.data.user || result.data.userInfo;
          } 
          // 格式2: result.data直接包含token和userInfo
          else if (typeof result.data === 'object' && result.data.hasOwnProperty('token')) {
            token = result.data.token;
            userInfo = result.data.user || result.data.userInfo;
          }
        } 
        // 格式3: result直接包含token和userInfo
        else if (result && result.token) {
          token = result.token;
          userInfo = result.user || result.userInfo;
        }
        
        if (token) {
          console.log('注册成功，收到有效令牌:', token.substring(0, 10) + '...');
          
          // 检查令牌是否是JWT格式
          if (token.split('.').length !== 3) {
            console.warn('警告: 收到的令牌不是标准JWT格式');
          }
          
          // 使用多种方式保存令牌，增强兼容性
          uni.setStorageSync('token', token);
          uni.setStorageSync('Authorization', `Bearer ${token}`);
          
          // 存储令牌信息
          const tokenInfo = JSON.stringify({
            value: token,
            expires: Date.now() + 24 * 60 * 60 * 1000 // 1天过期
          });
          uni.setStorageSync('tokenInfo', tokenInfo);
          
          // 如果有用户信息，保存并设置登录状态
          if (userInfo) {
            userStore.setUserInfo(userInfo);
            userStore.setLoggedIn(true);
            uni.setStorageSync('userInfo', JSON.stringify(userInfo));
            uni.setStorageSync('isLoggedIn', 'true');
          } else {
            // 构造基本用户信息
            const basicUserInfo = { username: registerForm.username, email: registerForm.email };
            userStore.setUserInfo(basicUserInfo);
            userStore.setLoggedIn(true);
            uni.setStorageSync('userInfo', JSON.stringify(basicUserInfo));
            uni.setStorageSync('isLoggedIn', 'true');
          }
          
          // 触发登录状态变化事件
          uni.$emit('loginStateChanged', { loggedIn: true, userInfo: userStore.userInfo });
          
          showMessage('注册并登录成功，正在跳转...', 'success');
          setTimeout(() => {
            uni.switchTab({ url: '/pages/index/index' });
          }, 1800);
        } else {
          console.warn('注册成功，但没有收到令牌，切换到登录页');
          showMessage('注册成功，请立即登录', 'success');
          setTimeout(() => {
            switchTab('login');
            loginForm.username = registerForm.username;
          }, 1500);
        }
      } catch (error) {
        console.error('注册错误:', error);
        
        // 默认错误提示
        let errorMsg = '注册失败，请重试';
        
        // 处理具体错误
        if (error.code) {
          switch (error.code) {
            case 1001:
              errorMsg = '用户名已存在';
              break;
            case 1002:
              errorMsg = '邮箱已存在';
              break;
            default:
              errorMsg = `注册失败 (错误代码: ${error.code})`;
              break;
          }
        } else if (error.message) {
          errorMsg = error.message;
        }
        
        showMessage(errorMsg, 'error');
        console.error('注册错误详情:', error);
      } finally {
        isRegisterSubmitting.value = false;
      }
    }
    
    /**
     * 第三方登录
     * @param {String} type 登录类型: wechat, qq, weibo
     */
    function handleThirdPartyLogin(type) {
      showMessage('当前版本暂不支持第三方登录', 'warning');
    }
    
    /**
     * 跳转到重置密码页面
     */
    function goToResetPassword() {
      uni.navigateTo({
        url: '/pages/reset-password/reset-password'
      });
    }
    
    /**
     * 显示协议弹窗
     */
    function showAgreement() {
      agreementPopup.value.open();
    }
    
    /**
     * 关闭协议弹窗
     */
    function closeAgreement() {
      agreementPopup.value.close();
    }
    
    /**
     * 检查登录状态
     * 测试当前令牌是否有效
     */
    function checkUserLoginStatus() {
      if (userStore.checkTokenValidity()) {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    }
    
    // 返回必要的变量和函数给模板使用
    return {
      activeTab,
      loginForm,
      registerForm,
      formErrors,
      isLoginSubmitting,
      isRegisterSubmitting,
      messagePopup,
      agreementPopup,
      popupConfig,
      doLoginAction,         // 使用正确的登录函数名称
      loginAction: doLoginAction, // 添加兼容别名
      handleRegister,
      switchTab,
      showAgreement,
      closeAgreement,  // 添加关闭协议的方法
      handleThirdPartyLogin,
      // 确保模板中使用的所有方法都被暴露
      checkUserLoginStatus,
      goToResetPassword,
      thirdPartyLogin: handleThirdPartyLogin  // 为了兼容可能的旧代码
    };
  },
  // 使用mixins来增强页面引用方法的符合预期性
  mixins: []
};
</script>

<style lang="scss">
/* 登录页面样式 */
.login-container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  
  /* 页面头部样式 */
  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60rpx;
    padding-top: 40rpx;
    
    .logo {
      width: 180rpx;
      height: 180rpx;
      margin-bottom: 20rpx;
    }
    
    .title {
      font-size: 40rpx;
      font-weight: bold;
      color: #333333;
    }
  }
  
  /* 选项卡样式 */
  .tab-container {
    display: flex;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 50rpx;
    
    .tab-item {
      flex: 1;
      display: flex;
      justify-content: center;
      padding: 20rpx 0;
      position: relative;
      
      text {
        font-size: 32rpx;
        color: #999999;
      }
      
      &.active {
        text {
          color: #0066ff;
          font-weight: 500;
        }
        
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 25%;
          width: 50%;
          height: 4rpx;
          background-color: #0066ff;
        }
      }
    }
  }
  
  /* 表单容器样式 */
  .form-container {
    margin-top: 30rpx;
    
    .input-group {
      margin-bottom: 30rpx;
      
      .input-label {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 10rpx;
        display: block;
      }
      
      .input-field {
        height: 90rpx;
        background-color: #f5f5f5;
        border-radius: 45rpx;
        padding: 0 30rpx;
        font-size: 28rpx;
      }
      
      .error-message {
        color: #ff4d4f;
        font-size: 24rpx;
        margin-top: 10rpx;
        padding-left: 30rpx;
      }
    }
    
    .forget-pwd {
      text-align: right;
      margin-bottom: 40rpx;
      
      text {
        color: #999999;
        font-size: 26rpx;
      }
    }
    
    /* 登录按钮样式 - 使用uni-app原生按钮组件的样式 */
    .submit-btn {
      width: 100%;
      height: 90rpx;
      border-radius: 45rpx;
      font-size: 32rpx;
      margin-top: 60rpx;
      margin-bottom: 30rpx;
      background-color: #3b82f6 !important; /* 覆盖uni-app原生样式 */
      color: #ffffff !important;
      
      /* 按钮点击效果 */
      &::after {
        border: none;
      }
      
      /* 禁用状态 */
      &[disabled] {
        background-color: #93c5fd !important;
        color: rgba(255, 255, 255, 0.8) !important;
        opacity: 0.7;
      }
      
      /* 加载中状态 */
      &.uni-button-loading {
        opacity: 0.9;
      }
    }
    
    /* 第三方登录样式 */
    .third-party-login {
      margin-top: 60rpx;
      
      .divider {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        
        &:before,
        &:after {
          content: '';
          flex: 1;
          height: 1px;
          background-color: #eeeeee;
        }
        
        text {
          padding: 0 30rpx;
          font-size: 26rpx;
          color: #999999;
        }
      }
      
      .third-party-icons {
        display: flex;
        justify-content: center;
        
        .icon-item {
          width: 90rpx;
          height: 90rpx;
          background-color: #f5f5f5;
          border-radius: 50%;
          margin: 0 30rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          
          .iconfont {
            font-size: 50rpx;
            color: #666666;
          }
          
          .icon-wechat {
            color: #07c160;
          }
          
          .icon-QQ {
            color: #1da1f2;
          }
          
          .icon-weibo {
            color: #e6162d;
          }
        }
      }
    }
    
    /* 协议样式 */
    .agreement {
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      margin-bottom: 30rpx;
      font-size: 26rpx;
      color: #999999;
      
      .link {
        color: #0066ff;
        margin-left: 4rpx;
      }
    }
  }
  
  /* 协议弹窗样式 */
  .agreement-popup {
    background-color: #ffffff;
    border-radius: 10rpx;
    width: 80vw;
    padding: 30rpx;
    
    .agreement-title {
      font-size: 32rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20rpx;
    }
    
    .agreement-content {
      height: 60vh;
      font-size: 26rpx;
      color: #666666;
      line-height: 1.6;
    }
    
    .agreement-footer {
      margin-top: 30rpx;
      display: flex;
      justify-content: center;
      
      .agreement-btn {
        width: 200rpx;
        height: 70rpx;
        line-height: 70rpx;
        background-color: #0066ff;
        color: #ffffff;
        font-size: 28rpx;
        border-radius: 35rpx;
      }
    }
  }
}
</style>
